<!--
 * @Author: zhangyang
 * @Date: 2021-12-09 19:25:11
 * @LastEditTime: 2021-12-13 12:11:51
 * @Description: 自定义表格组件
-->
<script lang="ts" setup>
import Group from './group';
import Head from './head';
import Body from './body';
interface Props {
  /**
   * 表头
   */
  tableHead: TableHeadItem[];
  /**
   * 表格数据
   */
  tableData: TableDataItem[];
  /**
   * 表格高度
   */
  height?: string;
};
const props = withDefaults(defineProps<Props>(), {
  height: '80vh'
});
</script>
<template>
  <div class="table-main" v-bind="$attrs">
    <table class="t-head">
      <Group :head="tableHead" />
      <Head :head="tableHead" />
    </table>
    <div class="body-wrapper" :style="{ maxHeight: height }">
      <table v-if="tableData.length" class="t-body" border="">
        <Group :head="tableHead" />
        <Body :head="tableHead" :body="tableData" />
      </table>
      <div v-else class="t-body">
        <van-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$head-bg-0: #96A8E0;
$head-bg-1: #9AB1E2;
$head-bg-2: #A8C0E9;
$color: white;
.table-main {
  @apply w-full border shadow rounded;

  .t-head {
    border: none;
    background-image: linear-gradient($head-bg-0, $head-bg-1, $head-bg-2);
    color: $color;
    table-layout: fixed;
    @apply w-full;
  }

  .body-wrapper {
    @apply w-full overflow-auto;
    display: block;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px
    }

    &::-webkit-scrollbar-track {
      background-color: rgba(73, 177, 245, .2);
      border-radius: 2em
    }

    &::-webkit-scrollbar-thumb {
      background-color: #49b1f5;
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
      border-radius: 2em
    }

    &::-webkit-scrollbar-corner {
      background-color: transparent
    }

    .t-body {
      border: none;
      // 干掉默认的单元格边框
      border-spacing: 0;
      @apply w-full;
    }
  }
}
</style>